<script setup>
import { ElMessage } from 'element-plus'
import { alterUserDetail, getUserDetail, registerUser } from '@/api/system/admin'
import { i18n } from '@/lang'
const { t } = i18n.global

/** 提交按钮 */
const userRef = ref('')
const open = ref(false)
const title = ref(t('user.createUser'))
const emits = defineEmits([])

const addEditForm = ref({
  name: '',
  id: '',
  phone: '',
  email: '',
  userName: '',
  password: '',
  create_at: '',
  update_at: ''
})

const formString = JSON.stringify(addEditForm.value)

// 提交表单
const submitForm = () => {
  userRef.value.validate((valid) => {
    if (valid) {
      if (addEditForm.value.id) {
        alterUserDetail(addEditForm.value).then((res) => {
          ElMessage({ message: '修改成功', type: 'success' })
          open.value = false
          emits('getList')
        })
      } else {
        registerUser(addEditForm.value).then((res) => {
          ElMessage({ message: '新增成功', type: 'success' })
          open.value = false
          emits('getList')
        })
      }
    }
  })
}

/** 取消按钮 */
const cancel = () => {
  open.value = false
  addEditForm.value = JSON.parse(formString)
}

// 打开弹框
const showModal = (row) => {
  if (row.id) {
    getUserDetail(row.id).then(({ data }) => {
      reshowData(addEditForm.value, data)
      title.value = '编辑用户'
    })
  } else {
    addEditForm.value.password = ''
    title.value = t('user.createUser')
  }
  open.value = true
}
//导出给refs使用
defineExpose({ cancel, showModal })
</script>

<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    v-model="open"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :title="title"
    width="650px"
    append-to-body
    @close="cancel"
  >
    <el-form ref="userRef" :model="addEditForm" label-width="100px" inline>
      <el-form-item :label="t('user.userid')" prop="id">
        <el-input v-model="addEditForm.id" readonly style="width: 150px" />
      </el-form-item>
      <el-form-item :label="t('user.name')" prop="name">
        <el-input v-model="addEditForm.name" style="width: 150px" :placeholder="t('user.placeholder')" />
      </el-form-item>
      <el-form-item :label="t('user.username')" prop="username">
        <el-input v-model="addEditForm.username" style="width: 150px" :placeholder="t('user.placeholder')" />
      </el-form-item>
      <el-form-item :label="t('user.passworld')" prop="passworld">
        <el-input v-model="addEditForm.password" style="width: 150px" :placeholder="t('user.placeholder')" />
      </el-form-item>
      <el-form-item :label="t('user.phone')" prop="phone">
        <el-input v-model="addEditForm.phone" style="width: 150px" :placeholder="t('user.placeholder')" />
      </el-form-item>
      <el-form-item :label="t('user.email')" prop="email">
        <el-input v-model="addEditForm.email" style="width: 150px" :placeholder="t('user.placeholder')" />
      </el-form-item>
      <el-form-item :label="t('user.createtime')" prop="create_at">
        <el-input v-model="addEditForm.create_at" readonly style="width: 150px" :placeholder="t('user.placeholder')" />
      </el-form-item>
      <el-form-item :label="t('user.updatetime')" prop="update_at">
        <el-input v-model="addEditForm.update_at" readonly style="width: 150px" :placeholder="t('user.placeholder')" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ t('user.confirm') }}</el-button>
        <el-button @click="cancel">{{ t('user.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>


<style scoped lang="scss"></style>
